<template>
  <div
    class="page"
    v-bind:class="bigScreen"
    ref="pageBlock"
    v-loading.fullscreen.lock="fullscreenLoading"
  >
    <div class="title">
      <span><b>产品策划详情</b></span>
      <el-button type="primary" @click="test">导出文档</el-button>
      <el-button @click="goback">返回</el-button>
      <div class="clear"></div>
    </div>
    <header>
      <div data-section="基本信息" data-ismain></div>
      <detail-page-header ref="form1" :data="formDataMap.form1" />
    </header>
    <main>
      <div data-section="外观图片" data-ismain></div>
      <detail-page-image
        ref="form2"
        :data="formDataMap.form2"
      ></detail-page-image>
    </main>
    <footer>
      <div data-section="文件列表" data-ismain></div>
      <detail-page-file
        ref="form3"
        :data="formDataMap.form3"
      ></detail-page-file>
    </footer>
    <div class="anchor-wrapper">
      <anchor v-if="pageBlock && winWidth > 1200" :page-block="pageBlock" />
      <el-button @click="handleEdit" type="primary">编辑</el-button>
    </div>
  </div>
</template>

<script>
import DetailPageHeader from "./components/DetailPageHeader.vue";
import DetailPageImage from "./components/DetailPageImage.vue";
import DetailPageFile from "./components/DetailPageFile.vue";
import Anchor from "@/components/anchor/index.vue";
import { postRequest } from "@/api/api";
import { exportRequest } from "@/api/api";
import store from "../../store";
export default {
  components: { DetailPageHeader, DetailPageImage, DetailPageFile, Anchor },
  data() {
    return {
      winWidth: store.getters.winWidth,
      params: {
        id: parseInt(this.$route.params.id),
      },
      backPage: "",
      pageBlock: null,
      formDataMap: {
        form1: {},
        form2: {},
        form3: {},
      },
    };
  },
  created() {
    this.fullscreenLoading = true;
  },
  mounted() {
    this.pageBlock = this.$refs["pageBlock"];
    this.postPlanning();
    this.fullscreenLoading = false;
  },
  beforeRouteEnter(to, from, next) {
    console.log("helo", from, to);

    next((vm) => {
      console.log("bye", vm);
    });
  },
  computed: {
    bigScreen() {
      // console.log("screen")
      if (this.winWidth < 1920) {
        return {
          bigScreen: false,
          smallScreen: true,
        };
      } else {
        return {
          bigScreen: true,
          smallScreen: false,
        };
      }
    },
  },
  methods: {
    test() {
      exportRequest("/plan/export", { id: this.params.id }).then((res) => {
        console.log(res.data);
        let blob = new Blob([res.data], { type: "applications/xlsx" });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "test.xlsx";
        link.click();
        URL.revokeObjectURL(url);
      });
    },
    goback() {
      this.$router.back();
    },
    handleEdit() {
      this.$router.push({ name: "策划编辑" });
    },
    postPlanning() {
      postRequest("/plan/plan_detail", this.params).then((res) => {
        let records = res.data.data;
        var _this = this;
        let formDataMap = this.resolveDataToMap(records);
        _this.formDataMap = Object.assign(formDataMap);
      });
    },
    parseDate(time) {
      if (time != null) {
        var x = new Date(time);
        var z = {
          y: x.getFullYear(),
          M: x.getMonth() + 1,
          d: x.getDate(),
        };
        if (z.M < 10) {
          z.M = "0" + z.M;
        }
        if (z.d < 10) {
          z.d = "0" + z.d;
        }
        return z.y + "-" + z.M + "-" + z.d;
      } else {
        return "暂无";
      }
    },
    jump() {},
    resolveDataToMap(data) {
      let base = process.env.API_HOST;
      for (let i = 0; i < data.pictureList.length; i++) {
        data.pictureList[i].url = base + data.pictureList[i].path;
      }
      const form1 = {
        id: data.id,
        name: data.name,
        brand: data.brand,
        seriesName: data.seriesName,
        productCode: data.productCode,
        productModel: data.productModel,
        category: data.category,
        specification: data.specification,
        position: data.position,
        energyLevel: data.energyLevel,
        developmentPlatform: data.developmentPlatform,
        color: data.color,
        material: data.material,
        func: data.func,
        remote_leader: data.remote_leader,
        base: data.base,
        type: data.type,
        origin: data.origin,
        distribution_channel: data.distribution_channel,
        changePoint: data.changePoint,
        windType: data.windType,
        project_office: data.project_office,
        remote_leader: data.remote_leader,
        remote_director: data.remote_director,
        plan_leader: data.plan_leader,
        plan_director: data.plan_director,
        project_leader: data.project_leader,
        project_director: data.project_director,
        out_director: data.out_director,
        out_leader: data.out_leader,
        inside_director: data.inside_director,
        inside_leader: data.inside_leader,
        smart_leader: data.smart_leader,
        smart_director: data.smart_director,
        print_leader: data.print_leader,
        print_director: data.print_director,
      };
      const form2 = {
        imageList: data.pictureList,
      };
      const form3 = {
        fileList: data.appearanceList,
        schemeFileList: data.schemeFileList,
        appearance_issue_time: this.parseDate(data.appearance_issue_time),
        appearance_issue_state: data.appearance_issue_state,
        name_state: data.name_state,
        name_date: this.parseDate(data.name_date),
        series_name_state: data.series_name_state,
        series_name_date: this.parseDate(data.series_name_date),
        shell_state: data.shell_state,
        shell_date: this.parseDate(data.shell_date),
        prototype_state: data.prototype_state,
        prototype_date: this.parseDate(data.prototype_date),
        recommend_book_state: data.recommend_book_state,
        recommend_meeting_state: data.recommend_meeting_state,
        recommend_meeting_date: this.parseDate(data.recommend_meeting_date),
        recommend_book_date: this.parseDate(data.recommend_book_date),
        production_state: data.production_state,
        production_date: this.parseDate(data.production_date),
        market_state: data.market_state,
        market_date: this.parseDate(data.market_date),
        plan_state: data.plan_state,
        plan_date: this.parseDate(data.plan_date),
      };
      return { form1, form2, form3 };
    },
  },
};
</script>

<style scoped>
.page {
  position: relative;
  height: 100%;
}
.bigScreen {
  width: 90%;
}
.smallScreen {
  width: 95%;
}
header,
main,
footer {
  margin: 40px 10px 40px 10px;
}
.title {
  margin: 40px 0px;
}
.title span {
  float: left;
}
.title button {
  float: right;
  margin-right: 20px;
}
.clear {
  clear: both;
}
.anchor-wrapper {
  position: fixed;
  opacity: 0.8;
  right: 0;
  width: auto;
  height: 300px;
  top: 30%;
  transform: translate(0, -50%);
}
</style>